<template>
  <div class="v-property-tag-table g-relative">
    <div class="_table-body">
      <div class="g-relative g-pd-l-10">
        <div class="g-flex _table-row g-ov-hidden _table-title">
          <div
            class="g-flex-0 _cell _name-column g-one-line"
            :style="{ width: nameColumnWidth + 'px' }"
          >
            {{ $t("名称") }}
          </div>
          <div class="g-flex-1 _cell _value-column">
            <span
              v-if="instanceName"
              class="g-m-l-8"
            >
              {{ $t(instanceName) }}
            </span>
          </div>
        </div>
        <div v-if="tagsPaneModel.tableData.length > 0">
          <template
            v-for="(classifier, index) of tagsPaneModel.tableData"
            :key="index"
          >
            <!-- classifier 行 -->
            <div class="g-flex _table-row g-ov-hidden">
              <div
                class="g-flex-1 _cell _name-column g-one-line _slot-parent"
                :style="{ width: 192 + 'px' }"
              >
                <span
                  v-if="classifier.isExpand"
                  class="g-m-r-4 g-m-l-4 g-pointer"
                >
                  <img
                    src="statics/icons/app/treeiconspread.svg"
                    @click="tagsPaneModel.handleShrink(classifier)"
                  />
                </span>
                <span
                  v-else
                  class="g-m-r-4 g-m-l-4 g-pointer"
                >
                  <img
                    src="statics/icons/app/treeiconshrink.svg"
                    @click="tagsPaneModel.handelSpread(classifier)"
                  />
                </span>
                <span class="g-m-r-4">
                  <img
                    style="height: 16px"
                    :src="modelService.getModelIcon(classifier.projectId, classifier.icon)"
                  />
                </span>
                <span>{{ $t(classifier.name) }}</span>
              </div>
            </div>

            <!--slot 行 -->
            <template v-if="classifier.isExpand">
              <div
                v-for="row of classifier.slots"
                :key="row.propertyId"
                class="g-flex _table-row g-ov-hidden"
                :class="{ '_current-row': tagsPaneModel.activePropertyId === row.propertyId }"
                @click="tagsPaneModel.onPropertyRowClick(row)"
              >
                <div
                  class="g-flex-0 _cell _name-column g-one-line _instance-bg"
                  :style="{ width: nameColumnWidth + 'px', paddingLeft: 42 + 'px' }"
                >
                  <span
                    v-if="row.values && row.values.length > 0"
                    class="g-m-r-4"
                  >
                    <img src="statics/images/sysml/Slot.svg" />
                  </span>
                  <span v-else>
                    <img
                      style="height: 16px"
                      :src="row.icon"
                      class="g-m-r-4"
                    />
                  </span>
                  <span>{{ $t(row.name) }}</span>
                </div>
                <!-- 实例值展示 -->
                <div class="g-flex-1 _cell _value-column _instance-bg g-ov-hidden">
                  <div class="g-flex g-ov-hidden">
                    <!-- 左侧值显示 -->
                    <div
                      v-if="row.propertyId === 'Customization::PackageStructureConfiguration-applyToElements'"
                      class="g-flex-1 package-disabled"
                    >
                      {{ $t("包") }}
                    </div>
                    <div
                      v-else-if="row.propertyId === 'Customization::PackageStructureConfiguration-createElement'"
                      class="view-model-structure"
                    >
                      {{ $t("查看与编辑包结构信息") }}
                    </div>
                    <div
                      v-else-if="PropertyKey.Customization_Banner_text === row.propertyId"
                      class="g-flex g-flex-1 g-ov-hidden"
                    >
                      <PropertyOperateBanner
                        :row="row"
                        :tagsPaneModel="tagsPaneModel"
                      />
                    </div>
                    <div
                      v-else
                      class="g-flex-1"
                    >
                      <div
                        v-for="(item, index) in row.values"
                        :key="index"
                        class="_value-column"
                        :class="{ '_active-row': item.id === tagsPaneModel.activeSlotValueId }"
                        @click="tagsPaneModel.onSlotValueClick(row.propertyId, item.id)"
                      >
                        <component
                          :is="propertyManager.getSlotPropertyEditor(row)"
                          :instanceId="attributeTabsModel.data.modelId"
                          :projectId="attributeTabsModel.projectId"
                          :slotData="row"
                          :slotValue="item"
                          :slotKey="tagsPaneModel.specificationKey"
                          :readonly="isModelDisabled"
                          :isMultiplicity="row.isMultiplicity"
                          :nullable="row.nullable"
                          :selected="item.id === tagsPaneModel.activeSlotValueId"
                          :row="item"
                          @delete-slot-value="tagsPaneModel.deleteSlotValue(row)"
                        />
                      </div>
                    </div>
                    <!-- 右侧点击按钮 -->
                    <template
                      v-if="
                        row.propertyId === tagsPaneModel.activePropertyId &&
                        !row.hidden &&
                        !isModelDisabled &&
                        row.propertyId !== 'Customization::PackageStructureConfiguration-applyToElements'
                      "
                    >
                      <!-- 判断是否为包结构配置,创建元素-->
                      <div
                        v-if="row.propertyId === 'Customization::PackageStructureConfiguration-createElement'"
                        class="edit-model-structure"
                      >
                        <img
                          class="more-icon g-pointer"
                          src="statics/icons/app/iconmore.png"
                          @click="tagsPaneModel.editTreeSlot(row, tagsPaneModel.tabsModel.data)"
                        />
                      </div>
                      <div
                        v-else-if="
                          row.propertyId === 'Customization::Banner-text' ||
                          row.propertyId === 'ValidationRule-ruleType' ||
                          row.propertyId === 'ValidationRule-validationRule'
                        "
                      >
                        <span></span>
                      </div>
                      <div
                        v-else
                        class="g-flex-0 _editor-height"
                        :class="{ '_string-editor': row.dataType && allowEditTypes.includes(row.dataType) }"
                      >
                        <div
                          v-if="row.isMultiplicity || (!row.isMultiplicity && row.values.length === 0)"
                          class="g-m-l-5 g-m-b-4"
                          style="height: 12px"
                        >
                          <img
                            src="statics/icons/app/iconadd.png"
                            class="g-pointer"
                            @click="tagsPaneModel.addSlotValue(row)"
                          />
                        </div>
                        <div
                          class="g-m-l-5"
                          style="height: 12px"
                        >
                          <img
                            src="statics/icons/app/iconreduce.png"
                            class="g-pointer"
                            :class="{ _disabled: !tagsPaneModel.activeSlotValueId }"
                            @click="tagsPaneModel.deleteSlotValue(row)"
                          />
                        </div>
                        <div
                          v-show="row.dataType && allowEditTypes.includes(row.dataType) && !row.hidden && !isModelDisabled"
                          class="g-m-t-4 g-m-l-5 g-pointer"
                          style="height: 12px"
                        >
                          <img
                            src="statics/icons/app/iconmodify.svg"
                            class="g-pointer"
                            :class="{ _disabled: !tagsPaneModel.activeSlotValueId }"
                            @click="tagsPaneModel.editSlotValue(row)"
                          />
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </template>
          </template>
        </div>
        <div v-else>
          <NoData></NoData>
        </div>

        <span
          class="_movebar _vertical g-block"
          :style="{ left: nameColumnWidth + 12 + 'px' }"
          @mousedown="handleMouseDownVertical"
        ></span>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { inject, Ref, ref, computed } from "vue";

import { propertyManager } from "./PropertyManager";
import PropertyOperateBanner from "./PropertyOperateBanner.vue";
import { PropertyDataType, PropertyKey } from "@/constants/Enums";
import NoData from "./noData.vue";
import { TagsPaneModel } from "./models/TagsPaneModel";
import { modelService } from "@/modules/model/service";

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = defineProps<{
  instanceName: string;
  tagsPaneModel: TagsPaneModel;
}>();
// const attributeTabsModel = app.activeProject!.attributeTabsModel;
const attributeTabsModel = computed(() => app.activeProject!.attributeTabsModel);

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

const nameColumnWidth = ref<number>(180);

const allowEditTypes = ref<any[]>([
  PropertyDataType.STRING,
  PropertyDataType.REAL,
  PropertyDataType.INTEGER,
  PropertyDataType.UNLIMITEDNATURAL
]);

let mouseStartX = 0;
let originWidth = 0;
const minWidth = 20;

function handleMouseDownVertical(event: any) {
  mouseStartX = event.clientX;
  originWidth = nameColumnWidth.value;
  window.addEventListener("mousemove", handleMouseMoveVertical);
  window.addEventListener("mouseup", handleMouseUpVertical);
}

function handleMouseMoveVertical(event: any) {
  const maxWidth = app.global.siderWidth - 40;
  const mouseEndX = event.clientX;
  let changeWidth = mouseEndX - mouseStartX;
  let width = originWidth + changeWidth;
  if (width > maxWidth) {
    width = maxWidth;
  } else if (width < minWidth) {
    width = minWidth;
  }
  nameColumnWidth.value = width;
}

function handleMouseUpVertical() {
  window.removeEventListener("mousemove", handleMouseMoveVertical);
  window.removeEventListener("mouseup", handleMouseUpVertical);
}
</script>
<style lang="scss">
@import "@/assets/css/theme.scss";
.v-property-tag-table {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  ._table-body-icon {
    position: absolute;
    left: 4px;
    margin-top: 4px;
  }
  ._table-title {
    background: $titlebar-bg-color;
  }
  ._table-body {
    flex: 1;
    overflow: auto;
    .package-disabled {
      text-align: center;
      background-color: #eee;
      cursor: not-allowed;
    }
    .view-model-structure {
      text-align: center;
      color: #999;
      padding-left: 8px;
    }
    .edit-model-structure {
      position: absolute;
      right: 4px;
      top: 0;
    }
  }
  ._active-row {
    background-color: $nth-of-type-bg-color !important;
  }
  ._editor-height {
    min-height: 48px;
    width: 30px;
    border-left: 1px solid rgb(221, 221, 221);
  }
  ._string-editor {
    min-height: 72px;
  }
  ._instance-bg {
    background-color: white;
  }
  ._tips {
    flex: 0 0 auto;
    font-size: 12px;

    border-top: 1px solid #e0e0e0;
    height: 64px;
    padding: 8px 10px;
    background: $frame-siderbar-bg-color;
    overflow: auto;
    ._footer-name {
      line-height: 16px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
    }
    ._footer-tips {
      font-size: 12px;
      line-height: 16px;
      word-break: break-all;
      overflow: auto;
    }
  }

  ._cell {
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 26px;
  }
  ._slot-parent {
    background: var(--md-color-sub2);
  }
  ._name-column {
    padding: 0 8px;
  }
  ._value-column {
    padding: 0;
    line-height: 26px;
    position: relative;
    border-right: 1px solid #ddd;

    ._slot-values {
      display: inline-flex;
      margin-right: 40px;
    }
    ._slot-add {
      display: inline-flex;
      position: absolute;
      right: 0;
      top: 0;
      width: 40px;
      height: 100%;
      ._add-img {
        position: absolute;
        right: 8px;
        top: 6px;
      }
    }
  }
  ._current-row {
    ._cell {
      box-shadow: inset -1px 0px 0px 0px #e0e0e0, inset 0px -1px 0px 0px #e0e0e0;
      border-top-color: $theme-color;
      border-left-color: $theme-color;
    }

    ._name-column {
      padding: 0 8px;

      background: $theme-color;
      color: white;
    }
    ._value-column {
      box-sizing: border-box;
      line-height: 24px;
      border-right-color: $theme-color;
    }
  }
  ._current-row + ._table-row {
    line-height: 26px;
    ._cell {
      border-top-color: $theme-color;
    }
  }
  ._icons {
    width: 30px;
    border: 1px solid red;
  }
  ._table-row:last-of-type {
    ._cell {
      border-bottom: 1px solid #ddd;
    }
  }
  ._table-row._current-row:last-of-type {
    ._cell {
      border-bottom: 1px solid $theme-color;
    }
  }

  .el-input__inner {
    border: none;
    box-sizing: border-box;
    height: 24px;
    line-height: 24px;
    background: none;
    box-shadow: none;
    text-align: left;
  }
  .el-textarea__inner:focus {
    background: none;
    box-shadow: none;
  }
  .el-textarea__inner {
    background: none;
    box-shadow: none;
    padding: 5px 8px;
    border: none;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .el-input-border {
    border: none;
  }
  ._disabled {
    cursor: not-allowed;
  }

  ._movebar {
    position: absolute;
    &._vertical {
      cursor: col-resize;
      width: 8px;
      height: 100%;
      top: 0;
    }
  }
}
</style>
